<template>
  <div class="gray-7-bg" style="height: 100vh">
    <f-layout class="page-layout page-table">
      <f-list v-bind="listOptions">
        <template #toolbar_left>
          <f-button danger class="mr10">OK</f-button>
        </template>

        <template #item="list">
          <div v-for="(item, index) in list" style="height: 50px">
            {{ index }}:
            {{ item.name }}
          </div>
        </template>
      </f-list>
    </f-layout>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const apiServe = (data) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        pageInfo: {
          total: 100,
          size: 20
        },
        data: new Array(100).fill(null).map((_, index) => ({ name: '11112312:-' + index }))
      });
    }, 20);
  });

const listOptions = reactive({
  grid: {
    gutter: 8,
    column: 4
  },
  toolbarConfig: {
    // enabled: false,
    search: true,
    title: '我是标题'
  },
  // rowConfig: {
  //   keyField: "productId",
  //   isCurrent: true,
  // },
  forms: [
    { field: 'name', label: '名称' },
    {
      type: 'select',
      field: 'bba',
      label: '下拉选项A',
      props: { options: [] }
    },
    {
      type: 'tree-select',
      field: 'institutionId',
      label: '机构',
      props: {
        treeData: [],
        treeNodeFilterProp: 'name',
        fieldNames: { children: 'children', label: 'name', value: 'id' },
        allowClear: true
      }
    },
    { type: 'input-number', field: 'age', label: '年龄' },
    { type: 'date-picker', field: 'data', label: '日期' },
    {
      type: 'select',
      field: 'sex',
      label: '性别',
      props: { options: [{ value: 1, label: '男' }], class: 's-w80' }
    },
    {
      type: 'dictionary',
      field: 'dictionary',
      label: '字典',
      props: { code: 'VisitType' }
    }
  ],
  query: (page, form) => apiServe({ ...page, ...form })
  // data: [
  //   {
  //     id: 10001,
  //     name: 'Test1',
  //     code: 'T1',
  //     price: 323429.3,
  //     doseType: { code: 'Develop' },
  //     isShows: true,
  //     minPackUnit: 'productImg/2c93001ab36912625521777dce3c2c63.png'
  //   },
  //   { id: 10002, name: 'Test2', code: 'T2', price: 33.5, doseType: { code: 'Test' }, isShows: true, minPackUnit: 'Women' },
  //   { id: 10003, name: 'Test3', code: 'T3', price: 0, doseType: { code: 'PM' }, isShows: false, minPackUnit: 'Man' },
  //   {
  //     id: 10004,
  //     name: 'Test4',
  //     code: 'T4',
  //     price: 23000.55667,
  //     doseType: { code: 'Designer' },
  //     isShows: true,
  //     minPackUnit: 'Women'
  //   },
  //   { id: 10005, name: 'Test5', code: 'T5', price: 387, doseType: { code: 'Develop' }, isShows: false, minPackUnit: 'Women' },
  //   {
  //     id: 10006,
  //     name: 'Test6',
  //     code: 'T6',
  //     price: 98400.024354,
  //     doseType: { code: 'Designer' },
  //     isShows: false,
  //     minPackUnit: 'Women'
  //   },
  //   { id: 10007, name: 'Test7', code: 'T7', price: 282799000003, doseType: { code: 'Test' }, isShows: true, minPackUnit: 'Man' },
  //   { id: 10008, name: 'Test8', code: 'T8', price: null, doseType: { code: 'Develop' }, isShows: true, minPackUnit: 'Man' }
  // ]
});
</script>

<style lang="scss"></style>
